<template>
  <div class="permission">
    <el-card>
      <div class="btn-box" style="text-align: right">
        <el-button type="primary" size="mini" @click="addprop(1, 0)"
          ><i class="el-icon-edit"></i> 添加菜单</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="菜单名称" sortable width="180">
        </el-table-column>
        <el-table-column prop="code" label="权限标识" sortable width="180">
        </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              v-if="row.type == 1"
              @click="addprop(2, row.id)"
              size="small"
              >添加权限点</el-button
            >

            <el-button type="text" size="small">查看api权限</el-button>
            <el-button type="text" @click="seeclick(row.id)" size="small"
              >查看</el-button
            >
            <el-button type="text" @click="removeclick(row.id)" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <dig
      :digshow="digshow"
      @closedig="closedig"
      ref="myfrom"
      @updatepermission="getallper"
    ></dig>
  </div>
</template>

<script>
import dig from "./compantans/dig.vue";
import { getallpermission, removepermission } from "@/api/permission";
export default {
  components: {
    dig,
  },
  data() {
    return {
      tableData: [],
      digshow: false,
    };
  },
  methods: {
    addprop(type, pid) {
      this.digshow = true;
      this.$refs.myfrom.setprop(type, pid);
    },
    async removeclick(val) {
      try {
        await this.$confirm("是否删除当前权限点？", "警告");
        await removepermission(val);
        await this.getallper();
        this.$message.success("删除成功");
      } catch {}
    },
    async seeclick(val) {
      await this.$refs.myfrom.getinfoid(val);
      this.digshow = true;
    },
    closedig() {
      this.digshow = false;
    },
    async getallper() {
      let res = await getallpermission();
      this.tableData = res;
      function plan(arr, pid) {
        let res1 = [];
        arr.forEach((item) => {
          if (item.pid === pid) {
            var children = plan(arr, item.id);
            if (children.length > 0) {
              item.children = children;
            }
            res1.push(item);
          }
        });
        return res1;
      }
      // console.log(plan(this.list, ""));
      this.tableData = plan(this.tableData, "0");
    },
  },
  created() {
    this.getallper();
  },
};
</script>

<style>
</style>